<template>
  <div id="OrderIndex">
    <main-header :title="'订单管理'" :crumbsArr="crumbsArr" />
    <div class="nav_index_main">
      <el-tabs
        type="border-card"
        v-model="cTab"
        @tab-click="clickTab">
        <el-tab-pane
          v-for="item in tabsConfig" :key="item.name"
          :label="item.name" :name="item.id">
          <component
            v-if="cView === item.component"
            :is="cView"
            :tabConfig="tabsConfig[cTab]">
          </component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/layouts/MainHeader'
import HasPaymentTable from '@/components/pages/order/indexTabs/HasPaymentTable'
import ToSendTable from '@/components/pages/order/indexTabs/ToSendTable'
import RefundTable from '@/components/pages/order/indexTabs/RefundTable'
import CompletedTable from '@/components/pages/order/indexTabs/CompletedTable'

export default {
  name: 'OrderIndex',
  components: { MainHeader, HasPaymentTable, ToSendTable, RefundTable, CompletedTable },
  beforeRouteEnter (to, from, next) {
    next(vm => vm.init())
  },
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { txt: '订单管理' }
      ],
      cTab: '0',
      cView: 'HasPaymentTable',
      tabsConfig: [ // tabs参数
        {
          id: '0', name: '已付款', component: 'HasPaymentTable'
        },
        {
          id: '1', name: '待发货', component: 'ToSendTable'
        },
        {
          id: '2', name: '退款', component: 'RefundTable'
        },
        {
          id: '3', name: '已完成', component: 'CompletedTable'
        }
      ]
    }
  },
  methods: {
    init () {
      this.cView = ''
      this.$nextTick(() => {
        this.cTab = '0'
        this.cView = 'HasPaymentTable'
      })
    },
    clickTab () {
      this.cView = this.tabsConfig[this.cTab].component
    }
  }
}
</script>

<style scoped lang="scss">
  .nav_index_main {
    padding: 20px 20px 0;
  }
</style>
